<script setup>
import { ref, reactive, computed, watch, watchEffect } from "vue";



const search = ref("")

const names = ref([{
  name: '调试'
},{
  name: '测试'
},{
  name: '出发'
},{
  name: '触发'
}])

const computedNames = computed(() => {
  return names.value.filter((item) => item.name.includes(search.value))
})

// watch([search, names], ([newSearch, newName], [oldSearch, oldName]) => {
//   console.log(newSearch, newName, oldSearch, oldName)
// })
// // 默认初始化执行一次
// watchEffect(() => {
//   // 逻辑当中使用的参数发生变化会执行
//   console.log(search)
// })

// watch watchEffect 可以用变量接收属性监听结果
const stopWacth = watch(search, (newSearch, oldSearch) => {
  console.log(newSearch)
})

const handleClick = () => {
  console.log(stopWacth)
  stopWacth();
}

</script>

<template>
  <div class="home">
    <input type="text" v-model="search" />
    <button @click="handleClick">停止</button>
    <p v-for="(item, index) in computedNames">{{ item.name }}</p>
  </div>    
</template>

<style scoped>

</style>
